<template>
  <div>
    <div class="cameraBox">
      <video id="videoCamera" class="videoCamera" :width="videoWidth" :height="videoHeight"></video>
      <canvas id="canvasCamera" class="canvasCamera" :width="videoWidth" :height="videoHeight">
      </canvas>
      <div>
        <el-button @click="photograph">拍照</el-button>
        <!-- 默认状态 切换到当前组件摄像头打开 -->
        <el-button v-if="flag" @click="openCamera">打开摄像头</el-button>
        <el-button v-else @click="closeCamera">关闭摄像头</el-button>
        <el-button>重置</el-button>
        <el-button @click="goStuInfoEntry">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Button, Message
} from 'element-ui'

export default {
  data() {
    return {
      flag: false,
      videoWidth: 500,
      videoHeight: 350,
      thisVideo: null,
      thisContext: null,
      thisCanvas: null,
      imgSrc: "",
    };
  },
  components: {
    "el-button": Button,
  },
  mounted() {
    this.openCamera();
  },
  methods: {
    goStuInfoEntry() {
      // 提交按钮的作用  是将this.imgSrc传递给学生信息录入组件  跳转到学生信息录入
    },
    // 拍照
    photograph() {
      // 拍照实际上就是将video当中播放的某个瞬间 用画图的方式 画到canvas当中
      // drawImage
      // 获取获取画布
      this.thisCanvas = document.querySelector(".canvasCamera");
      this.thisContext = this.thisCanvas.getContext("2d");

      this.thisContext.drawImage(
        this.thisVideo,
        0,
        0,
        this.videoWidth,
        this.videoHeight
      );

      //this.imgSrc 是base64字符串传递给学生信息录入组件
      // toDataURL返回值是包含图片信息的URL(base64)
      this.imgSrc = this.thisCanvas.toDataURL("image/png");
      // console.log(this.imgSrc);
    },
    // 打开本地摄像头
    openCamera() {
      // flag  false
      this.flag = false;
      // 获取video
      this.thisVideo = document.getElementById("videoCamera");
      // 打开本地摄像头 navigator.mediaDevices.getUserMedia
      // 旧版本浏览器 可能不支持mediaDevices  我们就将navigator.mediaDevices设计为一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 有些浏览器 getUserMedia 有的  有的某些浏览器它会覆盖该属性
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 获取一下不同浏览器的getUserMedia
          let getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia;

          // 如果在这些浏览器之外还是没getUserMedia,告诉请更换浏览器

          if (!getUserMedia) {
            return Promise.reject(new Error("请更换浏览器"));
          }
          // 如果有getUserMedia  （在不同内核有） 将其给navigator
          return new Promise((resolve, reject) => {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      // constraints 传入音频视频文件信息
      const constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
        },
      };

      // 调用摄像头
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((res) => {
          // res 数据流（实时数据流）
          // video 如何引入视频文件  src  视屏文件的路径
          // video srcObject 它可以实时数据 但是 低版本浏览器不支持
          console.log(res);
          // video当中是否有srcObject属性如果有 ，将实时数据流放到该函数内即可
          console.log(this.thisVideo);
          if ("srcObject" in this.thisVideo) {
            this.thisVideo.srcObject = res;
          } else {
            // window.URL.createObjectURL 创建一个新的对象 URL
            this.thisVideo.src = window.URL.createObjectURL(res);
          }
          //onloadedmetadata 视频数据加载完毕后就会触发
          this.thisVideo.onloadedmetadata = function () {
            console.log("视频元数据加载完毕");
            // Cannot read properties of undefined (reading 'play')
            console.log(this);
            this.play();
          };
        })
        .catch((err) => {
          console.log(err);
          Message({
            message: "没有开启摄像头或者浏览器不支持请求更换浏览器",
            type: "warning",
          });
        });
    },
    // 关闭摄像头
    closeCamera() {
      if (this.thisVideo && this.thisVideo !== null) {
        this.thisVideo.srcObject.getTracks()[0].stop();
        this.flag = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>

</style>